<template>
  <div>
    <!-- 模态框 -->
    <a-modal
      v-model:visible="showForm"
      :draggable="true"
      :title="t['操作']"
      :footer="false"
      :mask-closable="false"
      width="800px"
    >
      <div class="flex">
        <a-form
          :model="form"
          ref="formRef"
          :wrapper-col-props="{ span: 16 }"
          @submit-success="updateTag"
        >
          <a-form-item
            field="tagCode"
            :rules="{
              required: true,
              maxLength: 18,
              minLength: 16,
              message: t['校验失败']
            }"
            :label="t['价签编码']"
          >
            <a-input
              v-model="form.tagCode"
              :min-length="16"
              :max-length="18"
              allow-clear
              show-word-limit
            />
          </a-form-item>

          <a-form-item
            field="location"
            :rules="{
              message: t['校验失败']
            }"
            :label="t['区域']"
          >
            <a-input v-model="form.location" allow-clear show-word-limit />
          </a-form-item>

          <!--  -->
          <a-form-item
            field="resolutionId"
            :rules="{ message: t['校验失败'] }"
            :label="t['价签尺寸']"
            :disabled="!userInfo.user.admin"
          >
            <a-select v-model="form.resolutionId" :options="ratioList"></a-select>
          </a-form-item>
          <!--  -->
          <a-form-item
            field="tagColor"
            :rules="{ message: t['校验失败'] }"
            :label="t['价签颜色']"
            :disabled="!userInfo.user.admin"
          >
            <a-select
              v-model="form.tagColor"
              :options="translateOptions(deviceColorList)"
            ></a-select>
          </a-form-item>

          <a-form-item
            field="stationId"
            :rules="{ message: t['校验失败'] }"
            :label="t['选取基站']"
            :disabled="!userInfo.user.admin"
          >
            <a-select v-model="form.stationId" :options="stationList"></a-select>
          </a-form-item>

          <a-form-item field="bindMode" :label="t['绑定模式']" disabled>
            <a-radio-group v-model="form.bindMode">
              <a-radio value="1">{{ t["手动"] }}</a-radio>
              <a-radio value="0">{{ t["自动"] }}</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item>
            <div class="w-full text-right">
              <a-button class="mr-4" @click="showForm = false">{{ t["取消"] }} </a-button>
              <a-button html-type="submit" type="primary">
                {{ t["保存"] }}
              </a-button>
            </div>
          </a-form-item>
        </a-form>

        <div v-auth class="w-[400px]" v-if="!form.tagId">
          <BulkUploadWithResult url="/priceTag/priceTag/warehouse/xlsx">
            <h3>{{ t["上传文件，批量新增"] }}</h3>
          </BulkUploadWithResult>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { addPriceTag, updatePriceTag } from "@/api/service/priceTag/priceTag";
import { deviceColorList } from "@/data/options/selection";

import { userStore } from "@/store/modules/user/user";
import { FormInstance, SelectOption } from "@arco-design/web-vue";
import { form, showForm } from "../data/form";

const t = translate("公共模块");
const formRef = ref<FormInstance>();
const emit = defineEmits(["reload"]);

const userInfo = userStore();
defineProps<{
  ratioList: Array<SelectOption>;
  stationList: Array<SelectOption>;
}>();

const updateTag = async () => {
  if (form.value.tagId) {
    await updatePriceTag(form.value);
  } else {
    await addPriceTag(form.value);
  }
  emit("reload");
  showForm.value = false;
  formRef.value?.resetFields();
};

// const createConfig = {
//   uploadType: "",
//   downloadType: "0",
//   downloadLink: `/priceTag/priceTag/warehouse/xlsx`,
//   uploadLink: `/priceTag/priceTag/warehouse/xlsx`,
//   uploadText: "标签批量新增",
//   showResult: true
// };
</script>

<style lang="scss" scoped></style>
